<template>
	<div class="game-container">
		<div class="content">
			<el-table
				ref="refTable"
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="dataList"
				style="width: 100%;"
				highlight-current-row
				header-align="center"
				:header-cell-style="getRowClass"
			>
				<el-table-column
					type="index"
					label="序号"
					min-width="100"
					align="center"
				/>
				<el-table-column
					align="center"
					label="资源包类型"
					min-width="150"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ getTypeName(scope.row.type, resourceTypeArr) }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="最新版本号"
					min-width="150"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.version || '-' }}
					</template>
				</el-table-column>
				<!-- <el-table-column
					align="center"
					label="资源包地址"
					min-width="270"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<Copy
							v-if="scope.row.path"
							:title="scope.row.path"
							:copy="copy"
						>
							{{ scope.row.path }}
						</Copy>
						<span v-else>-</span>
					</template>
				</el-table-column> -->
				<el-table-column
					align="center"
					label="最后操作时间"
					min-width="180"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.lastUpdatedAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="最后操作人"
					min-width="270"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.lastOperator || '-' }}
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" min-width="300">
					<template slot-scope="scope">
						<span
							v-if="hasPermission('90870100')"
							class="text-link"
							@click="handleShowUpdate(scope.row)"
						>
							{{ $t('dxn.app_resource_manager.update') }}
						</span>
						<span
							v-if="hasPermission('90870101')"
							class="text-link ml15"
							@click="handleShowDownload(scope.row)"
						>
							{{ $t('dxn.app_resource_manager.download') }}
						</span>
						<span
							v-if="hasPermission('90870102')"
							class="text-link ml15"
							@click="handleShowRecord(scope.row)"
						>
							{{ $t('dxn.app_resource_manager.see') }}
						</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<OperationRecord
			v-if="operationRecordDialog.visible"
			:visible.sync="operationRecordDialog.visible"
			:detail="operationRecordDialog.detail"
			:resourceTypeArr="resourceTypeArr"
		></OperationRecord>
		<UpdateResource
			v-if="updateResourceDialog.visible"
			:visible.sync="updateResourceDialog.visible"
			:detail="updateResourceDialog.detail"
			:resourceTypeArr="resourceTypeArr"
			@loadData="loadData"
		></UpdateResource>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import OperationRecord from './components/OperationRecord'
import UpdateResource from './components/UpdateResource'

export default {
	name: routerNames.appResourceManager,
	components: {
		OperationRecord,
		UpdateResource
	},
	mixins: [list],
	data() {
		return {
			dataList: [],
			loading: false,
			operationRecordDialog: {
				visible: false,
				detail: {}
			},
			updateResourceDialog: {
				visible: false,
				detail: {}
			},
			resourceTypeArr: [
				{ code: 1, description: '互动道具' },
				{ code: 2, description: '商城商品' },
				{ code: 3, description: '聊天表情' }
			]
		}
	},
	methods: {
		handleShowUpdate(row) {
			this.updateResourceDialog = {
				visible: true,
				detail: row
			}
		},
		handleShowRecord(row) {
			this.operationRecordDialog = {
				visible: true,
				detail: row
			}
		},
		async handleDownload(url, fileName = '') {
			const link = document.createElement('a')
			const body = document.querySelector('body')
			link.href = url.replace(/^http:/, 'https:')
			link.click()
			body.removeChild(link)
			// try {
			// 	const response = await fetch(url, { mode: 'cors' })
			// 	const blobContent = await response.blob()
			// 	const blob = new Blob([blobContent], {
			// 		type: 'application/zip'
			// 	})
			// 	if (window.navigator.msSaveBlob) {
			// 		window.navigator.msSaveBlob(blob, fileName)
			// 	} else {
			// 		const link = document.createElement('a')
			// 		const body = document.querySelector('body')

			// 		link.href = URL.createObjectURL(blob)
			// 		link.download = fileName
			// 		link.style.display = 'none'
			// 		body.appendChild(link)
			// 		link.click()
			// 		body.removeChild(link)
			// 		URL.revokeObjectURL(link.href)
			// 	}
			// } catch (error) {
			// 	const link = document.createElement('a')
			// 	const body = document.querySelector('body')
			// 	link.href = url
			// 	link.click()
			// 	body.removeChild(link)
			// }
		},
		handleShowDownload(row) {
			if (!row.path) {
				return this.$message.warning('没有资源包可下载')
			}
			const fileTitle = this.getTypeName(row.type, this.resourceTypeArr)
			this.$confirm(
				`是否下载${fileTitle}的最新版本资源包？`,
				'下载资源包',
				{
					confirmButtonText: this.$t('common.sure'),
					cancelButtonText: this.$t('common.cancel')
				}
			)
				.then(() => {
					const fileName = fileTitle + row.version + '.zip'
					this.handleDownload(row.path, fileName)
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					})
				})
		},
		loadData() {
			this.loading = true
			this.dataList = []
			this.$api
				.getResourcePackageListBend({})
				.then((res) => {
					this.loading = false
					this.dataList = res?.data || []
				})
				.catch(() => {
					this.loading = false
				})
		}
	}
}
</script>
<style lang="scss" scoped></style>
